<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	x="0px" y="0px" width="28cm" height="21cm" viewBox="0, 0, 560, 420">
  <!-- variation on path definitions all leading to a 1x1 square -->
  <defs>
    <path d="M0,0 20,0 20,20 0,20 0,0z" fill="red" stroke="none" id="box"/>
    <path d="M0,0 10,0 10,10 0,10 0,0z" fill="red" stroke="none" id="box-sm"/>
    <path d="M0,0h20v20h-20z" fill="lime" id="box-lime"/>
    <path d="M0,0h20v20h-20z" id="box-nofill"/>
    <style  type="text/css">
      .blue { fill:blue } /* class */
      #green { fill:lime } /* id */
      .red { fill:red } /* class */
      .blue#yellow { fill: yellow } /* both */
      .blue#cyan { fill: cyan } /* both */
      #gray { fill: gray } /* both */
      text {font-family:sans-serif; font-size:10pt; }
    </style>
  </defs>
  <!-- the explicit fill attribute closes the path -->
  <path d="M20,20L40,20 40,40 20,40 20,20" fill="black" stroke="none" id="box11"/>
  <!-- should be black, but was white with Dia one day ... -->
  <path d="M60,20h20v20h-20z" style="stroke:none,fill:#000000" id="box21"/>
  <!-- the trailing semicolon should be optional -->
  <path d="M100,20h20v20h-20z" style="stroke:none;fill:#000000" id="box31"/>
  <!-- implicit line-to -->
  <path d="M140,20,160,20,160,40,140,40z" fill="black" stroke="none" id="box41"/>
  <!-- start is alway absolute -->
  <path d="m180,20 20,0 0,20 -20,0 z" fill="black" stroke="none" id="box51"/>
  <text x="220" y="40">Data and style</text> 
  <!-- style from group, offset in path -->
  <g style="stroke:none;fill:blue" id="boxX2">
    <!-- implicit close is supposed to be inherited by the group style -->
    <path d="M20,20L40,20 40,40 20,40 20,20" transform="translate(0,40)" id="box12"/>
    <!-- ... and by the nodes attributes -->
    <path d="M60,20h20v20h-20"  fill="blue" transform="translate(0,40)" id="box22"/>
    <path d="M100,20h20v20h-20z" transform="translate(0,40)"  id="box32"/>
    <path d="M140,20,160,20,160,40,140,40z" transform="translate(0,40)" id="box42"/>
    <path d="m180,20 20,0 0,20 -20,0 z" transform="translate(0,40)" id="box52"/>
    <text x="220" y="80">Group style and translate</text> 
  </g>
  <!-- Use use variations -->
  <use x="20" y="100" xlink:href="#box"/>
  <use x="0" y="0" xlink:href="#box" transform="translate(60,100)" id="box13"/>
  <!-- reference to non existing -->
  <use x="10" y="100" xlink:href="#box1" transform="translate(80,0)"  id="box23"/>
  <use xlink:href="#box-sm" transform="matrix(2,0,0,2,100,100)"/>
  <g id="scaled-use" transform="matrix(2,0,0,2,140,100)">
    <use x="0" y="0" xlink:href="#box-sm" id="box43"/>
    <use x="0" y="0" xlink:href="#box-sm" transform="translate(20,0)" id="box53"/>
  </g>
  <text x="220" y="120" fill="red">Use and transform</text>
  <!-- Use coloring: Firefox 23.0, Inkscape 0.48 and sodipodi have it all lime -->
  <use x="20" y="140" xlink:href="#box-lime"/>
  <!-- the already styled templated is supposed to be stronger than own fill attribute -->
  <use x="60" y="140" fill="yellow" xlink:href="#box-lime"/>
  <!-- style from template stronger than groups fill attribute -->
  <g style="fill:cyan">
    <use x="100" y="140" xlink:href="#box-lime"/>
  </g>
  <!-- style from template stronger than own style attribute -->
  <use x="140" y="140" style="fill:magenta" xlink:href="#box-lime"/>
  <!-- style from template stronger than own style attribute -->
  <use x="180" y="140" xlink:href="#box-lime" style="fill:gray" />
  <!-- lime!=green, using the latter for readability -->
  <text x="220" y="160" fill="green">Use: lime(, yellow, cyan, magenta, gray?)</text>
  <!-- Use coloring: this time compatible: default black -->
  <use x="20" y="180" xlink:href="#box-nofill"/>
  <!-- Use coloring by fill="yellow" -->
  <use x="60" y="180" fill="yellow" xlink:href="#box-nofill"/>
  <!-- Dia fill style lost by <use/> design conflict -->
  <g style="fill:cyan">
    <use x="100" y="180" xlink:href="#box-nofill"/>
  </g>
  <!-- Use style="fill:magenta" -->
  <use x="140" y="180" style="fill:magenta" xlink:href="#box-nofill"/>
  <!-- Use style="fill:gray" attribute order does not matter -->
  <use x="180" y="180" xlink:href="#box-nofill" style="fill:gray" />
  <text x="220" y="200" fill="black">Use: black, yellow, cyan, magenta, gray</text>

  <!-- CSS -->
  <g id="gray">
    <!-- blue by class -->
    <path class="blue" d="M20,220h20v20h-20z"/>
    <!-- red by class, no style for id -->
    <path class="red" id="sthelse" d="M60,220h20v20h-20z"/>
    <!-- green by id -->
    <path id="green" d="M100,220h20v20h-20z"/>
    <!-- yellow by class and id -->
    <path class="blue" id="yellow" d="M140,220h20v20h-20z"/>
    <!-- no such class: cyan by lookup implementation detail or gray from group id -->
    <path class="blue#cyan" d="M180,220h20v20h-20z"/>
    <text x="220" y="240">CSS: blue, red, lime, yellow, gray (cyan?)</text>
  </g>

  <!-- more complex pathes -->
  <g transform="translate(20,260)">
    <!-- filled with hole, watch it's color -->
    <g transform="scale(0.2,0.2)">
      <path d="M0,0 100,0 100,100 0,100z" fill="blue" id="border"/>
      <path d="M30,30 70,30 70,70 30,70z" fill="red" id="mostly-hidden"/>
      <!-- hole is counter-clockwise -->
      <path d="M20,20 80,20 80,80 20,80z M40,40 40,60 60,60 60,40 40,40z"
	fill="lime" fill-opacity="0.8" id="with-hole"/>
    </g>
    <g transform="matrix(0.2,0,0,0.2,40,0)">
      <use xlink:href="#border"/>
      <use xlink:href="#mostly-hidden"/>
      <!-- hole clockwise w/ evenodd -->
      <path d="M20,20 80,20 80,80 20,80z M40,40 60,40 60,60 40,60 40,40z"
	fill="lime" fill-opacity="0.8" fill-rule="evenodd" id="maybe-with-hole"/>
    </g>
    <g transform="matrix(0.2,0,0,0.2,80,0)">
      <use xlink:href="#border"/>
      <use xlink:href="#mostly-hidden"/>
      <!-- no hole: clockwise, missing fill-rule -->
      <path d="M20,20 80,20 80,80 20,80z M40,40 60,40 60,60 40,60 40,40z"
	fill="lime" fill-opacity="0.8" id="without-hole"/>
    </g>
    <g transform="matrix(0.2,0,0,0.2,120,0)">
      <!-- more holes counter-clockwise: smallest first -->
      <path d="M40,40 40,60 60,60 60,40 40,40z" fill="red"/>
      <path d="M20,20 80,20 80,80 20,80zM40,40 40,60 60,60 60,40 40,40z" fill="lime"/>
      <path d="M0,0 100,0 100,100 0,100zM20,20 20,80 80,80 80,20z" fill="blue"/>
    </g>
    <g transform="matrix(0.2,0,0,0.2,160,0)">
      <!-- more holes counter-clockwise: smallest last -->
      <path d="M0,0 100,0 100,100 0,100zM20,20 20,80 80,80 80,20z" fill="blue"/>
      <path d="M20,20 80,20 80,80 20,80zM40,40 40,60 60,60 60,40 40,40z" fill="lime"/>
      <path d="M40,40 40,60 60,60 60,40 40,40z" fill="red"/>
    </g>
    <text x="200" y="20" fill="blue">Hole: counter-clockwise, evenodd, none(zero?), more...</text>
  </g>
  <!-- more paths with holes -->
  <g transform="translate(20,300)">
    <!-- reference, outer: clockwise, inner: counter-clockwise -->
    <path d="M0,0 h20 v20 h-20 v-20zM5,5 v10 h10 v-10z" fill="black" stroke="none"/>
    <!-- with hole, starting from inside -->
    <path d="M45,5 h10 v10 h-10 v-10 m-5,-5 h20 v20 h-20z" fill="black" stroke="red" fill-rule="evenodd"/>
    <!-- with hole, starting from inside, outside counter-clockwise -->
    <path d="M85,5 h10 v10 h-10 v-10 m-5,-5 v20 h20 v-20z" fill="black" stroke="red"/>
    <!-- with hole, starting from inside, inner counter-clockwise -->
    <path d="M125,5 v10 h10 v-10 h-10 m-5,-5 h20 v20 h-20z" fill="black" stroke="red"/>
    <text x="200" y="20" fill="black">Holes first: reference, evenodd, outside: ccw, inner: ccw</text>
  </g>
  <!-- implicit close -->
  <g transform="translate(20,340)">
    <!-- just a simple box with hole -->
    <path d="M0,0 h20 v20 h-20 m5,-5 h10 v-10 h-10 z"/>
    <!-- closing the path by fill attribute -->
    <path d="M40,0 v20 h20 v-20" fill="black" stroke="red"/>
    <!-- closing the path by fill attribute, with curves -->
    <path d="M80,0 c7,0 13,0 20,0 c0,7 0,13 0,20 c-7,0 -13,0 -20,0" fill="black" stroke="red"/>
    <text x="200" y="20" fill="black">Implicit close: hole, top, left, ...</text>
  </g>
</svg>
